<template>
    <div class="w100_ h100_ flex-column hidden">
        <div class="flex-row-center greycolor pd20">
            <span class="weight pointer mr30" @click="proxy.routerBackMixin()"><< 返回</span>
            <span class="">组织架构 >> 单位管理 >> 编辑</span>
        </div>
        <div class="flex-column w100_ flex1 hidden">
            <div class="w100_ whitebg radius10 pd20-row">
                <span class="titleLabel mb10">单位管理</span>
                <el-form ref="form" :model="obj.data" label-width="80px">
                    <el-form-item label="省份" prop="province" :rules="[formRulesMixin.notNull]">
                        <el-select v-model="obj.data.province" placeholder="请选择省份" clearable>
                            <el-option v-for="(item,index) in proxy.$setting.globalData.provinces" :key="index" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单位名称" prop="name" :rules="[formRulesMixin.notNull]">
                        <el-input v-model="obj.data.name" placeholder="请输入单位名称" clearable autocomplete="off"></el-input>
                    </el-form-item>
                    <div class="w100_ flex-center pd10-column">
                        <span class="btn linebtn clear" @click="proxy.routerBackMixin()">取消</span>
                        <span class="btn sub" @click.prevent="upData">{{proxy.$route.query.id>0?'保存':'保存'}}</span>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
    
    <div class="form">
        <el-form ref="form" :model="obj.data" label-width="80px">
            <el-form-item label="单位名称" prop="name" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.name" placeholder="请输入单位名称" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="省份" prop="province" :rules="[formRulesMixin.notNull]">
                <el-select v-model="obj.data.province" placeholder="请选择省份" clearable>
                    <el-option v-for="(item,index) in proxy.$setting.globalData.provinces" :key="index" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>
        <div class="btns">
            <span class="btn clear" @click="$emit('close')">取消</span>
            <span class="btn sub" @click.prevent="upData">提交</span>
        </div>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, onMounted } from 'vue'
    let { proxy } = getCurrentInstance()
    const emit = defineEmits(['init', 'close']) //此处要完全对应，采用固定的update:prop属性
    const props = defineProps({
        id: { type: Number, require: true, default: 0 },
        name: { type: String, require: true, default: '' },
        province: { type: String, require: true, default: '' },
    })

    let obj = reactive({
        data:{
            "company_id": 0,
            "name": "",
            "province": ""
        },
    })

    onMounted(() => {
        setTimeout(() => {
            proxy.$refs['form'].clearValidate()
        }, 0);
        init()
    })

    let init = async () => {
        obj.data.company_id = proxy.$route.query.id||0
        obj.data.name = proxy.$route.query.name||''
        obj.data.province = Number(proxy.$route.query.province)||''
    }

    let upData = () => {
        proxy.$refs['form'].validate(valid => {
            if (valid) {
                proxy.$ajax({
                    url: '/manager/company/design',
                    data: obj.data,
                    bfLoading: true
                }).then(data => {
                    if(data.success){
                        proxy.elMessageMixin(`${obj.data.company_id > 0 ? '保存' : '添加'}成功`, 'success')
                        proxy.$refs['form'].resetFields()
                        proxy.routerBackMixin()
                    }else{
                        ElMessage({ message: data.err, type: 'error', duration: 2 * 1000 })
                    }
                }).catch(() => {})
            } else {
                return false
            }
        })
    }
</script>

<style scoped>
    .el-form{max-width: 400px !important;}
</style>

